<template>
    <splitpanes class="default-theme box" @resize="onResize">
      <pane :size="30" style="height: 100%;overflow-y:auto;position:relative;">
        <pre><code class="language-html" ref="codeRef">{{ code }}</code></pre>
        <a-button type="primary"  
          data-clipboard-target="#code" 
          class="btn-copy"
          @click="toCopy">复制代码</a-button> 
      </pane>
      <pane :size="60" min-size="20" style="postion:relative;">
        <iframe :src="url" style="border:none;height:100%;width:100%" v-if="url" />
      </pane>
    </splitpanes>
  </template>
  
  <script setup>
  import { ref, watch, onMounted, nextTick } from 'vue'
  import { useRoute } from 'vue-router';
  import { message } from 'ant-design-vue'
  import {copyTextToClipboard} from '../mixins.js'
  import { Splitpanes, Pane } from 'splitpanes'
  import 'splitpanes/dist/splitpanes.css'
  const hljs = window.hljs
  
  const route = useRoute()
  const url = ref(null)
  const code = ref(null)
  const scrollRef = ref(null)
  const codeRef = ref(null) 
  
  onMounted(() => {
    init()
  })
  
  watch(() => route.query.path, v => {
    init()
  })
  
  
  const init = () => {
    const { path, title } = route.query;
    console.log(path)
    url.value = path
    // 加载代码
    fetch(window.location.origin + path).then(res => res.text()).then(res => {
      // console.log(res)
      code.value = res;
      nextTick(() => highlight())
    })
    if (title) {
      document.title = `${title} - One Earth`
    }
  }
  
  const onResize = () => { }
  const highlight = async () => {
    hljs.highlightElement(codeRef.value);
    hljs.lineNumbersBlock(codeRef.value);
  }
  
  const toCopy = () => {
    message.info('复制成功！')
    copyTextToClipboard(code.value)
  }
  
  
  </script>
  
  <style lang="less" scoped>
  .box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
  
    ::-webkit-scrollbar {
      /*隐藏滚轮*/
      display: none;
    }
  
    pre {
      margin: 0;
    }
    .btn-copy{
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
  </style>